<template>
	<view>
		<view class="nav2">
			<u-navbar title="查询同名人数" bgColor="transparent" :fixed="false" @leftClick="leftBack">
			</u-navbar>
		</view>
		<u-gap height="30"></u-gap>
		<view class="ml30 mr30 form-box pore">
			<view class="bgFff p30 radius30">
				<view class="textC c343 bold pore">
					<view>同名人数</view>
					<u-gap height="20"></u-gap>
					<!-- <view class="f60" v-if="count > 0" @click="openUrl('/subpage/samename/list?name='+name+'&sex='+sex)">{{count}}</view> -->
					<view class="f60">{{count}}</view>
					<view v-if="count > 0" class="to-detail">
						<u-button shape="circle" color="#FFF4EC"  @click="openUrl('/subpage/samename/list?name='+name+'&sex='+sex)" 
							:customStyle="{'color':'#FF7F1C','height':'50rpx','fontSize':'24rpx','fontWeight':'normal'}">
							<view class="flex">
								<text>同名详情</text>
								<u-icon name="arrow-right" size="14" color="#FF7F1C"></u-icon>
							</view>
						</u-button>
					</view>
				</view>
				<u-line color="#ddd" margin="40rpx 0"></u-line>
				<view class="f28 c343">姓名：</view>
				<u-gap height="10"></u-gap>
				<view class="bgF7 radiusBox p20">
					<u-input v-model="name" border="none" type="text" placeholder="请输入姓名，如（张三、李四）"></u-input>
				</view>
				<u-gap height="20"></u-gap>
				<view class="f28 c343">性别：</view>
				<u-gap height="10"></u-gap>
				<view class="">
					<u-radio-group v-model="sex">
						<u-radio :customStyle="{marginRight: '20rpx'}" labelSize="14" activeColor="#FFDE6D"
							v-for="(item, index) in sexList" :key="item.value" :label="item.name" :name="item.value">
						</u-radio>
					</u-radio-group>
				</view>
				<u-gap height="10"></u-gap>
				<u-gap height="20"></u-gap>
				<view class="f28 c343">地区范围：</view>
				<u-gap height="10"></u-gap>
				<view class="bgF7 radiusBox p20">  <!-- @click="show_area = true" -->
					<u-input v-model="area" border="none" placeholder="选择地区" disabled disabledColor="#f7f7f7"></u-input>
				</view>
			</view>
			<u-gap height="30"></u-gap>
			<view>
				<u-button shape="circle" color="#FFDE6D" :disabled="!name"  @click="submitForm()" 
					:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D'}">
					立即查询
				</u-button>
			</view>
			<u-gap height="10"></u-gap>
			<view class="f24 c999">
				注：每日最多查询3次
			</view>
		</view>
		<!-- 选择地区 -->
		<u-popup :show="show_area" @close="show_area = false" mode="center" @open="show_area = true" closeable
			round="20" :customStyle="{'width':'80%'}">
			<view class="p30">
				<view class="c343 bold">选择地区</view>
				<u-gap height="20"></u-gap>
				<view class="">
					<u-radio-group v-model="selAreaindex" placement="column">
						<u-radio :customStyle="{margin: '8px 0'}" labelSize="14" activeColor="#FFDE6D"
							v-for="(item, index) in areaList" :key="index" :label="item.name" :name="index">
						</u-radio>
					</u-radio-group>
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au">
					<u-button color="#FFDE6D":customStyle="{'color':'#111','height':'80rpx','width':'40%'}"
						shape="circle" @click="areaConfirm">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {checkDuplicateName} from '@/common/api_car.js'
	export default {
		name: '',
		data() {
			return {
				name: '',
				sex:'0',
				area:'东楚地区',
				count:0,
				show_area:false,
				selAreaindex:0,
				sexList:[
					{
						name:'全部',
						value:'0'
					},
					{
						name:'男',
						value:'1'
					},
					{
						name:'女',
						value:'2'
					}
				],
				areaList:[
					{
						name:'黄石港区'
					},
					{
						name:'大冶市'
					},
					{
						name:'阳新'
					}
				]
			}
		},
		onLoad(option) {

		},
		methods: {
			areaConfirm(){
				console.log(this.selAreaindex);
				this.area = this.areaList[this.selAreaindex].name
				this.show_area = false
			},
			getSamename(){
				uni.showToast({
					title:'今日次数已用完,请明日再试',
					icon:'none'
				})
			},
			async submitForm() {
				uni.showLoading({
					mask: true
				})
				const res = await checkDuplicateName({
					name: this.name,
					sex:this.sex,
					type:'count'
				})
				if (res.code == 200) {
					uni.hideLoading()
					this.count = res.data
					if (res.data === 0) {
						uni.showToast({
							title: '哇！稀有名字，在东楚地区没有跟您同名的！',
							icon: 'none'
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}
	.to-detail{
		position: absolute;
		right: 0;
		top: 0;
	}
</style>